<template>
	<view class="indexContainer">
		<view class="header">
			<view class="search">
				<text class="iconfont icon-sousuo"></text>
				<input class="searchIpt" type="text" placeholder="商品名/品牌/订货号/型号等" >
				<text class="searchText">搜索</text>
			</view>
			<image class="searchImg" src="../../static/images/ting.png" mode=""></image>
		</view>
		<scroll-view scroll-x="true" enable-flex class="navList">
			<view class="navItem">
				<text class="navText" :class="{active:currentId === -1}" @click="toHome">首页</text>
			</view>
			<view class="navItem"  @click="toNavDetail(index)" v-for="(nav,index) in headerNav" :key="index">
				<text class="navText" :class="{active:currentId === index}">{{nav.title}}</text>
			</view>
		</scroll-view>
	</view>
	
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:"Nav",
		data() {
			return {
				currentId:-1
			};
		},
		
		mounted(){
			this.getHeaderNav()
		},
		methods:{
			getHeaderNav(){
				this.$store.dispatch('home/getHeaderNav')
			},
			toHome(){
				this.currentId = -1
				this.$emit('changeFlag',1)
			},
			toNavDetail(index){
				this.currentId = index
				this.$emit('changeFlag',2)
				
			}
		},
		computed:{
			...mapState('home',['headerNav'])
		}
	}
</script>

<style lang="stylus">
	.indexContainer
		height: 100%
		.header
			display: flex
			width: 100%
			background-color: #272f6d
			align-items: center
			height: 90upx
			.search
				display: flex
				height: 60upx
				margin: 30upx 0
				flex: 1
				box-sizing: border-box
				border: 2upx solid white
				border-radius: 40upx
				align-items: center
				margin-left: 20upx
				font-size: 34upx
				.iconfont
					width: 40upx
					height: 40upx
					margin: 10upx
				.searchIpt	
					height: 20upx
					font-size: 28upx
					caret-color: #aaa
					flex: 1
				.searchText
					color: red
					margin: 28upx
					text-align: center
					height: 30upx
					line-height: 30upx
			.searchImg
				width: 60upx
				height: 60upx
				margin: 0 20upx 	
		.navList
			display: flex
			flex-wrap: nowrap	
			height: 100upx
			background-color: #272f6d
		.navItem
			height: 80upx
			flex-shrink: 0
			padding: 10upx
			.navText
				height: 40upx
				line-height: 40upx
				color: white
				font-size: 28upx
				text-align: center
				padding: 10upx
				&.active
					font-size: 36upx
					border-bottom: 6upx solid white	
</style>